@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

.va-df-image-upload
  height: inherit !important
  padding 0 5px 0 0
  &:hover
    border-color $color-df-input-border !important

.va-df-image-upload-list
  overflow hidden
  list-style none
  margin 0
  padding 0 0 5px 0

  .__image-item
    float left
    margin-left 5px
    margin-top 5px
    height 100px
    width 100px
    user-select none
    outline none
    f-border #e2e2e2
    transition border-color ease-in-out .15s, box-shadow ease-in-out .15s
    form-control-focus()
    canvas
      width 100%
      height 100%

.va-df-image-upload-thumb
  relative()
  height 100%
  width 100%
  display flex
  flex-direction column
  justify-content center
  text-align center

  > .__image-img
    display inline-block
    max-height 100px
    max-width 100px
    overflow hidden

    > img
      display inline-block
      max-height 100px
      max-width 100px

.va-df-image-upload-operate
  absolute()
  bottom 4px
  right 0
  text-align right
  line-height 0
  > button
    display inline-block
    margin-right 4px

.va-df-image-upload-add
  background #fff
  color #aaa
  text-align center
  display flex
  flex-direction column
  justify-content center
  font-size 18px

.va-df-image-upload-state
  abs-full()
  color #fff
  font-size 14px
  line-height 14px
  font-weight bold
  display flex
  flex-direction column
  justify-content center
  text-align center
  text-shadow 0 0 4px #aaa

.va-df-image-upload-thumb-cover
  abs-full()
  background #000
  opacity .6
